const App = () => {
    const style = {
        box: {
            width: "100%",
            background: "url(https://gw.alipayobjects.com/zos/rmsportal/YdHxtXJcMJvZkZwQXchF.png) no-repeat 50%/1600px"
        },
        banner: {
            width: "1200px",
            height: "537px",
            margin: "0 auto",
            display: "flex"
        },
        img_box: {
            width: "455px",
            height: "537px",
            paddingLeft: "115px"
        },
        box_right: {
            width: "621px",
            height: "453px",
            display: "flex"
        },
        middle: {
            width: "266px",
            height: "308px",
            padding: "145px 0 0  25px",
        },
        a1: {
            width: "266px",
            height: "75px",
            marginTop: "25px",
            background: "#fff",
            color: "#ff5e00",
            lineHeight: "75px",
            textAlign: "center",
            fontSize: "22px",
            display: "block",
        },
        a2: {
            width: "266px",
            height: "75px",
            marginTop: "10px",
            background: "#fff",
            color: "#ff5e00",
            lineHeight: "75px",
            textAlign: "center",
            fontSize: "22px",
            display: "block"
        },
        code: {
            width: "330px",
            height: "304px",
            padding: "145px 0 0 69px"
        },
        box2: {
            width: "100%",
            height: "500px",
        },
        secton: {
            width: "1200px",
            height: "500px",
            margin: "0 auto",
            display: "flex"
        },
        foot: {
            width: "455px",
            height: "310px",
            padding: "196px 0 0 79px"
        },
        foot_p: {
            fontSize: "58px",
            color: "#2b2b2b",
            fontWeight: "100",
            lineHeight: "60px",
            marginBottom: "0"
        },
        store: {
            color: "#505050",
            fontSize: "24px",
            marginTop: "22px",
            lineTeight: "24px",
            fontWeight: "100"
        },
        section_right: {
            width: "677px",
            height: "491px",
            padding: "49px 0 37px 107px"
        },
        box3: {
            width: "100%",
            height: "500px",
            background: "#f8f6f4"
        },
        box4: {
            width: "100%",
            height: "500px",
            background: "#f8f6f4"
        },
    }
    return <div style={style.box}>
        <div style={style.banner}>
            <div style={style.img_box}>
                <img src="https://gw.alipayobjects.com/zos/rmsportal/cVedEmTGagYPkutkrWsn.png" alt="" />
            </div>
            <div style={style.box_right}>
                <div style={style.middle}>
                    <img src="https://gw.alipayobjects.com/zos/rmsportal/myOBmcOaLadquKXTCNpD.png" alt="" />
                    <a href="#" style={style.a1}>App Store下载</a>
                    <a href="#" style={style.a2}>Android 下载</a>
                </div>
                <div style={style.code}>
                    <img src="https://gw.alipayobjects.com/zos/rmsportal/pXSUIxVQXQwosTFtpDUm.png" alt="" />
                </div>
            </div>
        </div>

        <div style={style.box2}>
            <div style={style.secton}>
                <div style={style.foot}>
                    <p style={style.foot_p}>吃美食 订外卖</p>
                    <div style={style.store}>看人气找好店  饭点红包天天抢</div>
                </div>
                <div style={style.section_right}>
                    <img src="https://gw.alipayobjects.com/zos/rmsportal/LrpISPdzheMPhWIaYqkl.png" alt="" />
                </div>
            </div>
        </div>

        <div style={style.box3}>
            <div style={style.secton}>
                <div style={style.section_right}>
                    <img src="https://gw.alipayobjects.com/zos/rmsportal/npbUtXWiviwcttHqeisA.png" alt="" />
                </div>

                <div style={style.foot}>
                    <p style={style.foot_p}>逛超市 喝奶茶</p>
                    <div style={style.store}>商品代金券 买单立减券</div>
                </div>
            </div>
        </div>

        <div style={style.box2}>
            <div style={style.secton}>
                <div style={style.foot}>
                    <p style={style.foot_p}>看电影 订酒店</p>
                    <div style={style.store}>低价购票 特价酒店</div>
                </div>
                <div style={style.section_right}>
                    <img src="https://gw.alipayobjects.com/zos/rmsportal/HDEjWePLYPPYrZeSgQFw.png" alt="" />
                </div>
            </div>
        </div>

        <div style={style.box4}>
            <div style={style.secton}>
                <div style={style.section_right}>
                    <img src="https://gw.alipayobjects.com/zos/rmsportal/skxjyLqpaseWjBeEmOkJ.png" alt="" />
                </div>
                <div style={style.foot}>
                    <p style={style.foot_p}>看电影 订酒店</p>
                    <div style={style.store}>低价购票 特价酒店</div>
                </div>

            </div>
        </div>
    </div>
}
export default App